<template>
  <div class="viewer">
    <vc-viewer
      :infoBox="true"
      :baseLayerPicker="true"
      :geocoder="true"
      :homeButton="true"
      :sceneModePicker="true"
      :selectionIndicator="true"
      :shouldAnimate="shouldAnimate"
      :terrainProvider="terrainProvider"
      ref="viewer"
      @ready="ready"
    >
      <!-- <vc-datasource-czml czml="./Vehicle.czml" ref="czml_ref" @ready="subReady" :show="show"></vc-datasource-czml>

      <vc-datasource-kml data="./assets/yqtj-01.kml" ref="line_ref" :show="show" @ready="lineReady"></vc-datasource-kml> -->
      <!-- <vc-primitive-polyline-ground :appearance="appearance">
        <vc-instance-geometry>
          <vc-geometry-polyline-ground ref="polylineGround" :positions="positions" :width="10"></vc-geometry-polyline-ground>
        </vc-instance-geometry>
      </vc-primitive-polyline-ground>
      <vc-provider-terrain-cesium></vc-provider-terrain-cesium>-->
      <vc-layer-imagery>
        <vc-provider-imagery-bingmaps
          url="https://dev.virtualearth.net"
          bmKey="AgcbDCAOb9zMfquaT4Z-MdHX4AsHUNvs7xgdHefEA5myMHxZk87NTNgdLbG90IE-"
          mapStyle="Aerial"
        ></vc-provider-imagery-bingmaps>
      </vc-layer-imagery>

      <bottom-header />
    </vc-viewer>
  </div>
</template>
<script>
import bottomHeader from "../bottomHeader";

export default {
  components: {
    bottomHeader
  },
  data () {
    return {
      cesiumInstance: {},
      terrainProvider: {},
      lineDataSource: null,
      FlightDataSource: null,
      shouldAnimate: false,
      showFlagKml: false,
      show: false,
      appearance: {},
      geometryInstances: {},
      positions: [
        { lng: 100.1340164450331, lat: 31.05494287836128 },
        { lng: 108.08821010582645, lat: 31.05494287836128 },
        { lng: 108.07821010582645, lat: 31.05494287836128 }
      ]
    }
  },
  mounted () {
    this.$refs.viewer.createPromise.then(({ Cesium, viewer }) => {
      // viewer.scene.globe.baseColor = Cesium.Color.BLACK;
      //   viewer.terrainProvider = new Cesium.CesiumTerrainProvider({
      //   url: Cesium.IonResource.fromAssetId(1)
      // });
      // this.showKml();
      // this.showLine();
    })
    // this.$refs.polylineGround.createPromise.then(({ Cesium, viewer, cesiumObject }) => {
    //   const boundingSphere = Cesium.BoundingSphere.fromPoints(cesiumObject._positions)
    //   viewer.scene.camera.flyToBoundingSphere(boundingSphere)
    // })
  },
  methods: {
    ready (cesiumInstance) {
      this.cesiumInstance = cesiumInstance
      const { Cesium, viewer } = cesiumInstance
      this.terrainProvider = Cesium.createWorldTerrain()

      viewer.baseLayerPicker.viewModel.selectedImagery =
        viewer.baseLayerPicker.viewModel.imageryProviderViewModels[3]

      viewer.scene.skyBox.show = false
      let colors = new Cesium.Color(0, 0, 0.2, 0.5) // MIDNIGHTBLUE
      viewer.scene.backgroundColor = colors

      // this.appearance = new Cesium.PolylineMaterialAppearance()
    },
    subReady (cesiumInstance) {
      const { Cesium, viewer, cesiumObject } = cesiumInstance
      this.FlightDataSource = cesiumObject
      viewer.trackedEntity = cesiumObject

      // viewer.scene.camera.flyTo({
      //   destination: Cesium.Cartesian3.fromDegrees(-116.52, 35.02, 95000),
      //   orientation: {
      //     heading: 6
      //   }
      // });
      // viewer.camera.flyTo(-116.52, 35.02,90000)
    },
    lineReady (cesiumInstance) {
      const { Cesium, viewer, cesiumObject } = cesiumInstance
      this.lineDataSource = cesiumObject
      viewer.flyTo(cesiumObject)
    },

    // zcml 动态行为
    showFlight () {
      // const { Cesium, viewer, cesiumObject } = this.cesiumInstance;

      // viewer.dataSources.remove(this.lineDataSource);

      this.$refs.czml_ref.createPromise.then(
        ({ Cesium, viewer, cesiumObject }) => {
          viewer.trackedEntity = cesiumObject._entityCollection.values[0];

          (viewer.clock.shouldAnimate = true), (this.show = true)

          // viewer.scene.camera.flyTo({
          //   destination: Cesium.Cartesian3.fromDegrees(-116.52, 35.02, 95000),
          //   orientation: {
          //     heading: 6
          //   }
          // });
        }
      )
    },

    // kml 路线
    showLine () {
      const { Cesium, viewer, cesiumObject } = this.cesiumInstance;

      // viewer.dataSources.remove(this.FlightDataSource);
      (viewer.clock.shouldAnimate = false),
      this.$refs.line_ref.createPromise.then(
        ({ Cesium, viewer, cesiumObject }) => {
          viewer.flyTo(cesiumObject)
        }
      )

      // this.lineReady(this.cesiumInstance);
      // const { Cesium, viewer } = this.cesiumInstance;
      // let options = {
      //   camera: viewer.scene.camera,
      //   canvas: viewer.scene.canvas
      // };

      // this.lineViewer = viewer.dataSources
      //   .add(Cesium.KmlDataSource.load("./assets/yqtj-01.kml", options))
      //   .then(function(dataSource) {
      //     console.log(`dataSource==`, dataSource);
      //     // viewer.clock.shouldAnimate = false;
      //     // var rider = dataSource.entities.getById("tour");
      //     // // let rider = new Cesium.Entity();
      //     // viewer.flyTo(rider).then(function() {
      //     //   viewer.trackedEntity = rider;
      //     //   viewer.selectedEntity = viewer.trackedEntity;
      //     //   viewer.clock.multiplier = 5;
      //     //   viewer.clock.shouldAnimate = true;
      //     // });

      //     viewer.flyTo(dataSource);
      //   });

      //   xxoo = viewer.then((instances) => {
      //     console.log(`instances==`,instances)
      //   instances[0].viewer.zoomTo(instances[0].viewer.entities)
      // })

      // viewer.clock.clockRange = Cesium.ClockRange.UNBOUNDED;
      // viewer.clock.clockStep = Cesium.ClockStep.SYSTEM_CLOCK;

      // console.log(`2222222`, viewer.clock.clockRange, viewer.clock.clockStep);

      // this.showFlagFlight = !this.showFlagFlight;
    },

    // kml 项目

    showKml () {
      const { Cesium, viewer } = this.cesiumInstance

      console.log(
        `this.showFlagKml==`,
        this.showFlagKml,
        this.dataSourcePromise
      )
      if (this.showFlagKml) {
        viewer.dataSources.removeAll()
        this.dataSourcePromise = null
        this.showFlagKml = !this.showFlagKml
      } else {
        this.showFlagKml = !this.showFlagKml

        let options = {
          camera: viewer.scene.camera,
          canvas: viewer.scene.canvas
        }

        this.dataSourcePromise = viewer.dataSources.add(
          Cesium.KmlDataSource.load('./assets/proj.kml', options)
        )

        // 开启聚合

        this.dataSourcePromise.then(dataSource => {
          console.log(2222, dataSource)
          var pixelRange = 15
          var minimumClusterSize = 3
          var enabled = true

          dataSource.clustering.enabled = enabled
          dataSource.clustering.pixelRange = pixelRange
          dataSource.clustering.minimumClusterSize = minimumClusterSize

          var removeListener

          var pinBuilder = new Cesium.PinBuilder()
          var pin50 = pinBuilder.fromUrl(
            './assets/bigHose.png',
            Cesium.Color.RED,
            48
          )
          var pin40 = pinBuilder.fromUrl(
            './assets/bigHose.png',
            Cesium.Color.ORANGE,
            48
          )
          var pin30 = pinBuilder.fromUrl(
            './assets/bigHose.png',
            Cesium.Color.YELLOW,
            48
          )
          var pin20 = pinBuilder.fromUrl(
            './assets/bigHose.png',
            Cesium.Color.GREEN,
            48
          )
          var pin10 = pinBuilder.fromUrl(
            './assets/bigHose.png',
            Cesium.Color.BLUE,
            48
          )

          var singleDigitPins = new Array(8)
          for (var i = 0; i < singleDigitPins.length; ++i) {
            singleDigitPins[i] = pinBuilder.fromUrl(
              './assets/bigHose.png',
              Cesium.Color.BLUE,
              48
            )
            // .fromText("" + (i + 2), Cesium.Color.VIOLET, 48)
            // .toDataURL();
          }

          function customStyle () {
            if (Cesium.defined(removeListener)) {
              removeListener()
              removeListener = undefined
            } else {
              removeListener = dataSource.clustering.clusterEvent.addEventListener(
                function (clusteredEntities, cluster) {
                  cluster.label.show = false
                  cluster.billboard.show = true
                  cluster.billboard.id = cluster.label.id
                  cluster.billboard.verticalOrigin =
                    Cesium.VerticalOrigin.BOTTOM

                  if (clusteredEntities.length >= 50) {
                    cluster.billboard.image = pin50
                  } else if (clusteredEntities.length >= 40) {
                    cluster.billboard.image = pin40
                  } else if (clusteredEntities.length >= 30) {
                    cluster.billboard.image = pin30
                  } else if (clusteredEntities.length >= 20) {
                    cluster.billboard.image = pin20
                  } else if (clusteredEntities.length >= 10) {
                    cluster.billboard.image = pin10
                  } else {
                    cluster.billboard.image =
                      singleDigitPins[clusteredEntities.length - 2]
                  }
                }
              )
            }

            // force a re-cluster with the new styling
            var pixelRange = dataSource.clustering.pixelRange
            dataSource.clustering.pixelRange = 0
            dataSource.clustering.pixelRange = pixelRange
          }

          customStyle()
        })
      }
    }
  }
}
</script>

<style lang="less" scoped>
.viewer {
  width: 100%;
  height: 100%;
  position: relative;
}
.demo-tool {
  position: absolute;
  left: 1%;
  top: 1%;
  min-width: 185px;
  z-index: 100;
  color: #fff;
  background-color: #ccc;
}
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
.twipsy {
  display: block;
  position: absolute;
  visibility: visible;
  max-width: 200px;
  min-width: 100px;
  padding: 5px;
  font-size: 11px;
  z-index: 1000;
  opacity: 0.8;
  -khtml-opacity: 0.8;
  -moz-opacity: 0.8;
  filter: alpha(opacity=80);
}
.twipsy.left .twipsy-arrow {
  top: 50%;
  right: 0;
  margin-top: -5px;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 5px solid #000000;
}
.twipsy.right .twipsy-arrow {
  top: 50%;
  left: 0;
  margin-top: -5px;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-right: 5px solid #000000;
}
.twipsy-inner {
  padding: 3px 8px;
  background-color: #000000;
  color: white;
  text-align: center;
  max-width: 200px;
  text-decoration: none;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}
.twipsy-arrow {
  position: absolute;
  width: 0;
  height: 0;
}
</style>

 <!-- 设置 cesuim 导航样式 -->

<style lang="less">
// .vc-location-distance {
//   top: calc(100% - 4%) !important;
// }
</style>
